<template>
  <el-table :data="ticket">
    <el-table-column label="订单号" prop="id" show-overflow-tooltip/>
    <el-table-column label="门票名称" prop="ticketName" />
    <el-table-column label="购票时间" prop="ticketBuyTime" />
    <el-table-column label="入园时间" prop="ticketExpireTime"/>
    <el-table-column label="门票状态">
      <template #default="scope">
      <el-tag v-if="status==='UN_USE'" type="warning">{{ticketStatus[status]}}</el-tag>
      <el-tag v-if="status==='USING'" type="success">{{ticketStatus[status]}}</el-tag>
      <el-tag v-if="status==='USED' || status==='EXPIRE'" type="info">{{ticketStatus[status]}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column width="160" fixed="right" align="center" label="操作">
      <template #default="scope">
        <router-link class="link" :to="`/profile/user/ticketDetail/${scope.row.id}`">
          <el-button size="small" type="primary">查看详情</el-button>
        </router-link>
        &nbsp;
        <el-popconfirm
            v-if="status==='UN_USE'"
            confirmButtonText="确定"
            cancelButtonText="取消"
            title="确定要退票吗？"
            @confirm="returnTicket(scope)"
        >
          <template #reference>
            <el-button type="primary" size="small">退票</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>
</template>

<script>
import {getTicketListByUserId, returnOneTicket} from "@/api/ticket";
import {getDevice} from "@/utils/get-device";

export default {
  name: "unUse",
  props:['status'],
  data(){
    return{
      ticketStatus:{'UN_USE':'未使用','USED':'已使用','EXPIRE':'已过期','USING':'使用中'},
      currentPage:1,
      total:0,
      pageSize:10,
      layout:'total, sizes, prev, pager, next, jumper',
      ticket:[],
    }
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getTicketList()
  },
  methods:{
    returnTicket(scope){
      const a={
        id:scope.row.id,
        ticketId:scope.row.ticketId,
        ticketStatus:scope.row.ticketStatus,
        ticketPrice:scope.row.ticketPrice,
        ticketBuyTime:scope.row.ticketBuyTime
      }
      returnOneTicket(a).then(()=>{
        this.getTicketList()
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTicketList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTicketList()
    },
    getTicketList(){
      getTicketListByUserId(this.$store.state.user.userId,this.status,this.currentPage,this.pageSize).then(response =>{
          this.total=response.data.total
          this.ticket=response.data.ticketList
      })
    },
  }
}
</script>

<style scoped>
.link{
  text-decoration: none;
}
</style>
